<template>
  <div class="management">
    <div class="searchBtn">
      <el-input
          placeholder="请输入产品名称"
          class="searchInput"
          v-model="serchForm.name"
          style="width: 200px"
          clearable>
      </el-input>

      <el-select class="select" v-model="serchForm.manufacturer" placeholder="请选择厂家">
        <el-option
            v-for="item in ManufactureList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>

      <el-select class="select" v-model="serchForm.category" placeholder="请选择类别">
        <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>

      <el-select class="select" v-model="serchForm.cargo" placeholder="是否缺货">
        <el-option
            v-for="item in BooleanList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-select class="select" v-model="serchForm.hotSales" placeholder="是否热销">
        <el-option
            v-for="item in BooleanList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-select class="select" v-model="serchForm.newProduct" placeholder="是否新品">
        <el-option
            v-for="item in BooleanList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="searchBtn" size="mini">查询</el-button>
      <el-button type="warning" @click="clearBtn" size="mini">重置</el-button>
      <div class="add">
        <el-button type="text" @click="productDialogVisible=true" size="mini">产品新增</el-button>
        <el-button type="text" @click="addManufacturer" size="mini">厂家管理</el-button>
        <el-button type="text" @click="categoryDialogVisible=true" size="mini">类型管理</el-button>
        <el-button type="text" size="mini">批量修改</el-button>
      </div>
    </div>
    <div class="tables">
      <el-table
          :data="tableData"
          border
      >
        <el-table-column
            prop="id"
            label="id"
            width="60"
            align="center">
        </el-table-column>
        <el-table-column
            prop="flatPatternmaking"
            label="商品展示图"
            width="150"
            align="center">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.flatPatternmaking[0].ossUrl"
                :lazy="true"
                :preview-src-list="scope.row.flatPatternmaking.map(item=>item.ossUrl)"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="产品名称"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="categoryNameList"
            label="产品类别"
            align="center">
          <template slot-scope="scope">
            <span class="spans" v-for="item in scope.row.categoryNameList">{{item}}</span>
          </template>

        </el-table-column>
        <el-table-column
            prop="manufactureName"
            label="产品厂家"
            align="center">
          <template slot-scope="scope">
            <span class="manufactureNameSpans">{{scope.row.manufactureName}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格"
            width="50"
            align="center">
        </el-table-column>
        <el-table-column
            prop="vipPrice"
            label="vip价格"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="cargo"
            label="是否缺货"
            width="160"
            align="center">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.cargo"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeCargo(scope.row)"
                active-text="缺货"
                inactive-text="不缺货"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="hotSales"
            label="是否热销"
            width="160"
            align="center">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.hotSales"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="热销"
                inactive-text="普通"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="newProduct"
            label="是否新品"
            width="160"
            align="center">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.newProduct"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="新品"
                inactive-text="非新品"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="serchForm.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals">
      </el-pagination>
    </div>
    <!--    产品新增-->
    <el-dialog
        title="产品新增"
        :visible.sync="productDialogVisible"
        width="1200"
        :before-close="handleClose">
      <product></product>
      <span slot="footer" class="dialog-footer">
    <el-button @click="productDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="productDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <!--    厂家新增-->
    <el-dialog
        title="厂家管理"
        :visible.sync="menufacturerDialogVisible"
        width="1200"
        :before-close="handleClose">
      <manufacturerVue></manufacturerVue>
      <span slot="footer" class="dialog-footer">
    <el-button @click="menufacturerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="menufacturerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--    类型管理-->
    <el-dialog
        title="类型管理"
        :visible.sync="categoryDialogVisible"
        width="1200"
        :before-close="handleClose">
      <categoryVue></categoryVue>
      <span slot="footer" class="dialog-footer">
    <el-button @click="categoryDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//厂家信息
import manufacturerVue from '@/components/manage/manufacturer';
import product from '@/components/manage/product'
import categoryVue from '@/components/manage/category'
import {ajax} from "@/config/product";

export default {
  name: "management",
  components: {
    manufacturerVue,
    product,
    categoryVue
  },
  data() {
    return {
      totals:0,
      menufacturerDialogVisible: false,
      productDialogVisible: false,
      categoryDialogVisible: false,
      serchForm: {
        current:'1',//页码
        size:'10',//每页数据
        manufactureIds:null,//厂家Id集合
        categoryIdList:null,//类别Id集合
        cargo:null,//是否缺货
        hotSales:null,//是否热销
        newProduct:null,//是否新品
      },
      tableData: [
        // {
        //   id: 1,
        //   name: "名称",
        //   category: "类别",
        //   manufacturer: "厂家",
        //   cargo: '是否缺货',
        //   hotSales: '热销',
        //   newProduct: '是否新品',
        //   price: '21',
        //   vipPrice: '20',
        //   //产品展示图
        //   flatPatternmaking: [
        //     'https://imgservice.suning.cn/uimg1/b2c/image/VZqgD8xEDygZjTAe75jNgg.png_800w_800h_4e',
        //     'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
        //   ],
        //   //产品介绍图
        //   ProductIntroductionImages: [
        //     'https://imgservice.suning.cn/uimg1/b2c/image/VZqgD8xEDygZjTAe75jNgg.png_800w_800h_4e',
        //     'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
        //   ],
        //   remark: '备注',
        // },
        // {
        //   id: 2,
        //   name: "名称",
        //   category: "类别",
        //   manufacturer: "厂家",
        //   cargo: '0',
        //   hotSales: '0',
        //   newProduct: '0',
        //   price: '21',
        //   vipPrice: '20',
        //   flatPatternmaking: [''],
        // },
      ],
      BooleanList: [ {
        value: '0',
        label: '是'
      }, {
        value: '1',
        label: '否'
      }],
      categoryList: [],
      ManufactureList: []
    }
  },
  created() {
    this.getCategoryList()
    this.getManufacturerList()
    this.getProduct()
  },
  methods: {
    //商品列表查询
    getProduct(){
      ajax.getProductlist(this.serchForm).then(res=>{
        const {data}=res
        this.tableData=data.records
        this.totals=data.total
        console.log(data.records,'records')
        console.log(this.tableData,'123')
      })
    },
    //类型列表查询
    getCategoryList(){
      ajax.getCategoryListApi().then(res=>{
        const {data}=res
        this.categoryList=data
      })
    },
    //厂家列表查询
    getManufacturerList() {
      ajax.getManufactureListApi().then(res=>{
        const {data}=res
        this.ManufactureList=data
      })
    },
    //查询事件
    searchBtn() {
      this.getProduct()
    },
    //  清除查询参数
    clearBtn() {
      this.serchForm = {
        name: "",
        category: "",
        manufacturer: "",
        cargo: '',
        hotSales: '',
        newProduct: '',
      }
      this.getProduct()
    },
    //是否缺货change事件
    changeCargo(row) {
      console.log(row)
    },
    //厂家新增事件
    //点击打开厂家新增
    addManufacturer() {
      this.menufacturerDialogVisible = true
    },
    //弹窗关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    //  分页查询事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }

}
</script>

<style scoped lang="scss">

.management {
  background: #fff;
  height: 100%;
  border-radius: 10px;

  .searchBtn {
    display: flex;
    align-items: center;
    height: 90px;
    margin-left: 20px;

    .searchInput {
      width: 300px;
      margin-right: 10px;
    }

    .add {
      margin-left: 1%;
    }

    span {
      font-size: 14px;
      margin: 0 5px;
    }

    .select {
      margin: 0 5px;
      width: 120px;
    }
  }

  .tables {
    margin: 0 20px;
  }

  .block {
    margin-top: 50px;
    display: flex;
    margin-left: 50px;
  }
  .spans{
    display: inline-block;
    border: #d1cbcb 1px solid;
    border-radius: 5px;
    margin: 2px 2px;
    background-color: #aefbd8;
    padding: 2px;
  }
  .manufactureNameSpans{
    border: #d1cbcb 1px solid;
    border-radius: 5px;
    background-color: #fcc690;
    padding: 2px;
  }
}

</style>